import {Label} from "@/components/ui/label";
import {Input} from "@/components/ui/input";
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select";
import {Button} from "@/components/ui/button";
import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
import {cn} from "@/lib/utils";
import {CalendarIcon} from "lucide-react";
import {Calendar} from "@/components/ui/calendar";
import {zhCN} from "date-fns/locale";
import {format} from "date-fns"
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
import {Textarea} from "@/components/ui/textarea";

const FormAssembly = (props: any) => {
    return (
        <div className={cn({'col-span-2': props?.type === 'textarea'})}>
            {props?.label && <Label className={'mb-2'}>{props?.label}</Label>}
            {props?.type === 'input' && <Input
                placeholder={props?.placeholder}
                value={props.value || ""}
                onChange={(e: any) => {
                    props.change(e.target.value)
                }}
            />}
            {props?.type === 'select' && <Select
                value={props.value || ""}
                onValueChange={(value: any) => {
                    props.change(value)
                }}
            >
                <SelectTrigger>
                    <SelectValue placeholder={props?.placeholder}/>
                </SelectTrigger>
                <SelectContent>
                    {props?.options?.map((item: any, index: string) => {
                        return (
                            <SelectItem key={index} value={item.value}>
                                {item.label}
                            </SelectItem>
                        )
                    })}
                </SelectContent>
            </Select>}
            {props?.type === 'time' && <Popover>
                <PopoverTrigger asChild>
                    <Button
                        variant={"outline"}
                        className={cn(
                            "w-full justify-start text-left font-normal",
                            !props.value && "text-muted-foreground"
                        )}
                    >
                        <CalendarIcon className="mr-2 h-4 w-4"/>
                        {props.value ? format(props.value, props.format) : <span>{props?.placeholder}</span>}
                    </Button>
                </PopoverTrigger>
                <PopoverContent className="w-auto p-0">
                    <Calendar
                        mode="single"
                        selected={props.value}
                        onSelect={props.change}
                        locale={zhCN}
                        initialFocus
                    />
                </PopoverContent>
            </Popover>}
            {/* todo shadcn组件导致选择日期非常麻烦暂时先不支持range-time*/}
            {props?.type === 'upload' && <div className={'flex justify-start items-center'}>
                <Avatar>
                    <AvatarImage src="https://github.com/shadcn.png"/>
                    <AvatarFallback>CN</AvatarFallback>
                </Avatar>
            </div>}
            {/*todo 替换成富文本编辑框*/}
            {props?.type === 'textarea' && <Textarea
                className={'h-64'}
                placeholder={props?.placeholder}
                value={props.value || ""}
                onChange={(e: any) => {
                    props.change(e.target.value)
                }}
            />}
        </div>
    );
}

export default FormAssembly;
